<template>
    <div class="">
        <div class="top"></div>
        <div class="us-title">
            <br/>
            四川工商学院
            <br/>
            <br/>
            <p class="us-p">卫生检查上报</p>
        </div>
        <div class="us-text">请填写完成下列信息：</div>
        <div class="us-main">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="100px" class="demo-ruleForm">

                <el-form-item label="实验室门牌号" prop="doorNumber">
                    <el-select  v-model="ruleForm.doorNumber.door_number" placeholder="请选择实验室门牌号"  style="width: 98%">
                        <el-option v-for="item in ruleForm.doorNumber" :key="item.uuid" :label="item.lab_name+'('+item.door_number+')'" :value="item.door_number"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item  label="卫生状况" prop="hygieneResult">
                    <el-select v-model="ruleForm.hygieneResult"  style="width: 100%">
                        <el-option label="优" value="优"></el-option>
                        <el-option label="良" value="良"></el-option>
                        <el-option label="中" value="中"></el-option>
                        <el-option label="差" value="差"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="上报人" prop="hygienePerson">
                    <el-input v-model="ruleForm.hygienePerson"></el-input>
                </el-form-item>
                <el-form-item label="其他备注" prop="remark">
                    <el-input v-model="ruleForm.remark"></el-input>
                </el-form-item>

                <el-form-item  label="检查时间" prop="hygieneTime">
                    <el-date-picker
                        v-model="ruleForm.hygieneTime"
                        type="date"
                         style="width: 100%">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即上报</el-button>

                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    doorNumber:[{
                        door_number:'',
                        lab_name:'',
                        uuid:''
                    }],
                    hygieneResult:'',
                    hygienePerson: '',
                    remark:'',
                    hygieneTime:''
                },
                rules: {
                    hygienePerson: [
                        { required: true, message: '请输入上报人名字', trigger: 'blur' },
                    ],
                    remark: [
                        { required: true, message: '请输入其他备注', trigger: 'blur' },
                    ],

                }

            };
        },
        created(){
            this.getDoornumber();
        },
        methods:{
            getDoornumber(){
                this.$axios.get('/text/hygiene/querydoornumber').then((res) => {
                    this.ruleForm.doorNumber=res.data.data;
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('text/hygiene/insert?' +
                            "&doorNumber="+ this.ruleForm.doorNumber.door_number+
                            "&hygieneResult=" + this.ruleForm.hygieneResult+
                            "&hygienePerson=" + this.ruleForm.hygienePerson+
                            "&remark=" + this.ruleForm.remark+
                            "&hygieneTime="+ this.ruleForm.hygieneTime

                        ).then((res) => {
                            this.$message.info('上报成功');
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style scoped>
    @media (min-width:400px){

        .us-title{
            width: 100%;
            height:250px;
            text-align: center;
            font-size: 40px;
            font-weight: bolder;
            font-family: 宋体;
            background-image: url("../../assets/2.jpg");
        }
        .us-p{
            color: black;
            font-family: 华文行楷;
            font-size: 50px;
            font-weight: initial;
        }
        .us-main{
            text-align: center;
            width: 90%;
            margin: 0 auto;
        }
        .us-main button{
            width: 150px;
            height: 50px;
            border: 0px;
            font-family: 宋体;
            border-radius: 10px;
            font-size: 20px;
            font-style: inherit;
            color: white;
            margin: 30px 40px 10px 40px;
        }
        .us-text{
            margin-top: 30px;
            margin-left: 20px;
            font-size: 40px;
            height: 50px;
            margin-bottom: auto;
            font-family:隶书;
        }
        .us-b{
            margin-top: 160px;
            text-align: center;
            font-size: 15px;
        }

    }

    @media (max-width: 768px){
        .us-title{
            width: 100%;
            height:250px;
            text-align: center;
            font-size: 40px;
            font-weight: bolder;
            font-family: 宋体;
            background-image: url("../../assets/2.jpg");
        }

        .us-main{
            text-align: center;
            width: 90%;
            margin: 0 auto;
        }
        .us-main button{
            width: 150px;
            height: 50px;
            border: 0px;
            font-family: 宋体;
            border-radius: 10px;
            font-size: 20px;
            font-style: inherit;
            color: white;
            margin: 30px 40px 10px 40px;
        }
        .us-text{
            margin-top: 20px;
            margin-left: 40px;
            font-size: 35px;
            font-family:隶书;
            font-weight: lighter;
        }
        .us-b{
            margin-top: 80px;
            text-align: center;
            font-size: 15px;
        }
    }
</style>
